<template>
    <view class="publish-con">
        <header-vue :back="true" :title="title"></header-vue>
        
        <view class="content">
            <!-- 地址信息 -->
            <view class="address-card" v-if="pageShow">
                <!-- 取货地址 -->
                <view class="address-section">
                    <view class="section-header">
                        <text class="section-title">填写取货地址</text>
                        <view class="complete-status">
                            <text class="status-text">请完善取货信息</text>
                            <u-icon name="arrow-down" color="#333" size="24rpx"></u-icon>
                        </view>
                    </view>
                    <view class="address-form">
                        <view class="form-item" @click="goToCommunitySelect('pickup')">
                            <text class="label">小区</text>
                            <view class="input-value">
                                <text class="value-text" :class="{fc:pickupCommunity}">{{ pickupCommunity || '请选择' }}</text>
                                <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                            </view>
                        </view>
                        <view class="form-item">
                            <text class="label">详细地址</text>
                            <input class="input" placeholder="商家、单元、楼层、门牌号,如3单元401" v-model="pickupDetailAddress" />
                        </view>
                    </view>
                </view>
                
                <!-- 送货地址 -->
                <view class="address-section">
                    <view class="section-header">
                        <text class="section-title">填写送货地址</text>
                        <view class="complete-status">
                            <text class="status-text">请完善取货信息</text>
                            <u-icon name="arrow-down" color="#333" size="24rpx"></u-icon>
                        </view>
                    </view>
                    <view class="address-form">
                        <view class="form-item" @click="goToCommunitySelect('delivery')">
                            <text class="label">小区</text>
                            <view class="input-value">
                                <text class="value-text" :class="{fc:deliveryCommunity}">{{ deliveryCommunity || '请选择' }}</text>
                                <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                            </view>
                        </view>
                        <view class="form-item">
                            <text class="label">详细地址</text>
                            <input class="input" placeholder="单元、楼层、门牌号,如3单元401" v-model="deliveryDetailAddress" />
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 需求信息 -->
            <view class="demand-card">
                <view class="card-header">
                    <view class="header-icon">
                        <!-- 需求信息图标 -->
                        <image class="header-icon-img" :src="IMAGE_URL + '/static/community/icon13.png'" mode="aspectFit"></image>
                    </view>
                    <text class="card-title">需求信息</text>
                </view>
                <view class="demand-content">
                    <textarea 
                        class="demand-textarea" 
                        :placeholder="descList[title].desc || '请描述详细的取件信息,如:取件码并上传订单截图。'"
                        v-model="demandDesc"
                    ></textarea>
                    <view class="image-upload">
                        <view class="uploaded-images">
                            <view class="image-item" v-for="(img, index) in uploadedImages" :key="index">
                                <image :src="img" class="uploaded-img" mode="aspectFill"></image>
                                <view class="delete-btn" @click="removeImage(index)">×</view>
                            </view>
                        </view>
                        <view class="upload-btn" @click="chooseImage" v-if="uploadedImages.length < 9">
                            <u-icon name="camera" color="#666" size="50rpx"></u-icon>
                            <text class="upload-text">上传照片</text>
                        </view>
                    </view>
                </view>
            </view>

             <!-- 地址信息 -->
             <view class="address-card" v-if="!pageShow">
                
                <!-- 送货地址 -->
                <view class="address-section">
                    <view class="section-header">
                        <text class="section-title">填写服务地址</text>
                        <view class="complete-status">
                            <text class="status-text">请完善服务地址信息</text>
                            <u-icon name="arrow-down" color="#333" size="24rpx"></u-icon>
                        </view>
                    </view>
                    <view class="address-form">
                        <view class="form-item" @click="goToCommunitySelect('delivery')">
                            <text class="label">小区</text>
                            <view class="input-value">
                                <text class="value-text" :class="{fc:deliveryCommunity}">{{ deliveryCommunity || '请选择' }}</text>
                                <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                            </view>
                        </view>
                        <view class="form-item">
                            <text class="label">详细地址</text>
                            <input class="input" placeholder="单元、楼层、门牌号,如3单元401" v-model="deliveryDetailAddress" />
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 订单详情 -->
            <view class="order-card" v-if="pageShow">
                <view class="order-item">
                    <text class="order-label">数量</text>
                    <view class="quantity-control">
                        <view class="control-btn" @click="decreaseQuantity">-</view>
                        <text class="quantity-value">{{ quantity }}</text>
                        <view class="control-btn" @click="increaseQuantity">+</view>
                        <text class="unit">件</text>
                    </view>
                </view>
                
                <view class="order-item">
                    <text class="order-label">重量</text>
                    <view class="quantity-control">
                        <view class="control-btn" @click="decreaseWeight">-</view>
                        <text class="quantity-value">{{ weight }}</text>
                        <view class="control-btn" @click="increaseWeight">+</view>
                        <text class="unit">KG</text>
                    </view>
                </view>
                
                <view class="order-item" @click="showCouponList = true">
                    <text class="order-label">优惠券</text>
                    <view class="order-value">
                        <text class="coupon-amount" v-if="selectedCoupon">-{{ selectedCoupon.amount }}.00</text>
                        <text class="placeholder" v-else>请选择</text>
                        <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                    </view>
                </view>
                
                <view class="order-item" @click="showVirtualAsset = true">
                    <text class="order-label">虚拟资产</text>
                    <view class="order-value">
                        <text class="virtual-amount" v-if="selectedVirtualAsset">-{{ selectedVirtualAsset.amount }}.00</text>
                        <text class="placeholder" v-else>请选择</text>
                        <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                    </view>
                </view>
                
                <view class="order-item" @click="showTimePicker = true">
                    <text class="order-label">配送时间</text>
                    <view class="order-value">
                        <text class="time-text">{{ selectedTimeText || '请选择' }}</text>
                        <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                    </view>
                </view>
                
                <view class="order-summary">
                    <text class="summary-text">共{{ quantity }}件</text>
                    <view class="subtotal">
                        <text class="subtotal-label">小计: </text>
                        <text class="subtotal-amount">{{ calculateSubtotal() }}</text>
                    </view>
                </view>
            </view>

            <view class="order-card" v-if="!pageShow">
                <view class="order-item" @click="showTimePicker = true">
                    <text class="order-label">上门时间</text>
                    <view class="order-value">
                        <text class="time-text">{{ selectedTimeText || '请选择' }}</text>
                        <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                    </view>
                </view>
                <view class="order-summary">
                    <text class="summary-text">服务费用</text>
                    <view class="subtotal">
                        <text class="subtotal-label">小计: </text>
                        <text class="subtotal-amount">{{ calculateSubtotal() }}</text>
                    </view>
                </view>
            </view>
            
            <!-- 赏金 -->
            <view class="reward-card">
                <text class="reward-label">赏金</text>
                <input class="reward-input" placeholder="请输入赏金金额" v-model="rewardAmount" />
            </view>
        </view>
        
        <!-- 底部提交按钮 -->
        <fixed-footer>
            <view class="submit-btn" @click="submitOrder">
                立即发布 ¥{{ calculateTotal() }}
            </view>
        </fixed-footer>
        
        <!-- 优惠券弹窗 -->
        <u-popup :show="showCouponList" mode="bottom" @close="showCouponList = false" :closeable="true" :safeAreaInsetBottom="true" round="15">
            <view class="coupon-popup">
                <coupon-list
                    :type="['usable','available','canceluse']"
                     :couponList="couponList"
                    @useCoupon="handleUseCoupon"
                    @claimCoupon="handleClaimCoupon"
                    @cancelUseCoupon="handleCancelUseCoupon"
                ></coupon-list>
            </view>
        </u-popup>
        
        <!-- 虚拟资产弹窗 -->
        <virtual-asset-popup
            :show="showVirtualAsset"
            :pointsShow="false"
            @confirm="onVirtualAssetConfirm"
            @update:show="showVirtualAsset = $event"
        ></virtual-asset-popup>
        
        
        <!-- 时间选择器 -->
        <u-datetime-picker
            :show="showTimePicker"
            v-model="selectedTime"
            mode="datetime"
            :minDate="minDate"
            @confirm="onTimeConfirm"
            @cancel="showTimePicker = false"
        ></u-datetime-picker>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import virtualAssetPopup from '@/components/virtual-asset-popup/index.vue';
import couponList from '@/components/coupon/index.vue';
import fixedFooter from '@/components/fixed-footer/index.vue';
import appConfig from '@/config/app.js'
import { mapState, mapActions } from 'vuex';
import { postNeighborPublish, postNeighborPublishAgency, postUploadNow } from '@/api/index.js';

export default {
    components: {
        headerVue,
        virtualAssetPopup,
        couponList,
        fixedFooter
    },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            demandDesc: '',
            uploadedImages: [],
            quantity: 1,
            weight: 1,
            rewardAmount: '',
            pickupDetailAddress: '',
            deliveryDetailAddress: '',
            showCouponList: false,
            showVirtualAsset: false,
            showTimePicker: false,
            selectedCoupon: null,
            selectedVirtualAsset: null,
            selectedTime: '',
            selectedTimeText: '',
            minDate: Date.now(),
            couponList: [
                {
                    id: 1,
                    amount: 20,
                    condition: 100,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'usable',
                    validUntil: '2025-12-31'
                },
                {
                    id: 2,
                    amount: 50,
                    condition: 200,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'expired',
                    validUntil: '2025-01-01'
                },
                {
                    id: 3,
                    amount: 10,
                    condition: 50,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'usable',
                    validUntil: '2025-12-31'
                },
                {
                    id: 4,
                    amount: 30,
                    condition: 150,
                    type: '满减券',
                    restriction: '限家政服务类订单使用',
                    status: 'available',
                    validUntil: '2025-12-31'
                }
            ],
            selectedCoupon: null,
            id:'',
            descList: {
                '取外卖': { title: '取外卖', desc: '请描述详细的取件信息，如：取件码并上传订单截图。' },
                '取快递': { title: '取快递', desc: '请描述详细的取件信息，如：收件人电话、姓名，并上传订单截图。' },
                '代买商品': { title: '代买商品', desc: '请详细描述物品信息和取货要求。' },
                '代送': { title: '代送', desc: '请详细描述文件类型和递送要求。' },
                '宠物喂养': { title: '宠物喂养', desc: '请填写具体要求，如宠物类型，喂养时间及其他要求。描述越详细，接单越快。' },
                '宠物帮遛': { title: '宠物帮遛', desc: '请填写具体要求，如宠物类型，遛弯时间及其他要求。描述越详细，接单越快。' },
                '衣物干洗': { title: '衣物干洗', desc: '请描述具体需求，比如衣服的类型、材质、件数，描述越详细，接单越快。' },
                '家庭快修': { title: '家庭快修', desc: '请描述具体需求，比如维修什么、需要什么特殊技能及其它注意事项，描述越详细，接单越快。' },
                '陪护作业': { title: '陪护作业', desc: '请描述具体需求，比如维修什么、需要什么特殊技能及其它注意事项，描述越详细，接单越快。' },
                '到家家教': { title: '到家家教', desc: '请描述具体需求，比如维修什么、需要什么特殊技能及其它注意事项，描述越详细，接单越快。' },
                '带娃煮饭': { title: '带娃煮饭', desc: '请描述具体需求，比如维修什么、需要什么特殊技能及其它注意事项，描述越详细，接单越快。' },
                '其他家事': { title: '其他家事', desc: '请描述具体需求，比如服务内容、特殊要求及其它注意事项，描述越详细，接单越快。' }
            },
            pageShow: true,
            title:''
        }
    },
    computed: {
        ...mapState(['selectedPickupCommunity', 'selectedDeliveryCommunity']),
        pickupCommunity() {
            return this.selectedPickupCommunity ? this.selectedPickupCommunity.title : '';
        },
        deliveryCommunity() {
            return this.selectedDeliveryCommunity ? this.selectedDeliveryCommunity.title : '';
        }
    },
	//101 取外卖 。102 取快递。 103 代买商品。104 代送。 105宠物照看。 106 干洗衣服， 107 快修。108陪作业。109家教。110带娃。
    onLoad(option) {
		console.log("userID",option.service)
        this.id = option.service
        this.title = option.title
        if (this.title == '取外卖' || this.title == '取快递' || this.title == '代买商品' || this.title == '代送') {
            this.pageShow = true
        } else {
            this.pageShow = false
        }
    },
    onUnload() {
        // 返回上一页（离开当前发布页）时清空小区相关的store数据
        this.clearCommunitySelection && this.clearCommunitySelection()
    },
    methods: {
        ...mapActions(['clearCommunitySelection']),
        chooseImage() {
            const remaining = 9 - this.uploadedImages.length;
            if (remaining <= 0) return;
            
            uni.chooseImage({
                count: remaining,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    const files = Array.isArray(res.tempFiles) ? res.tempFiles : []
                    const filePathsFromFiles = files
                        .map(f => (f && (f.path || f.tempFilePath || f.filePath)) || '')
                        .filter(p => !!p)
                    const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : []
                    const merged = filePathsFromFiles.length ? filePathsFromFiles : filePaths
                    this.uploadedImages = this.uploadedImages.concat(merged)
                }
            });
        },
        removeImage(index) {
            this.uploadedImages.splice(index, 1);
        },
        increaseQuantity() {
            this.quantity++;
        },
        decreaseQuantity() {
            if (this.quantity > 1) {
                this.quantity--;
            }
        },
        increaseWeight() {
            this.weight++;
        },
        decreaseWeight() {
            if (this.weight > 1) {
                this.weight--;
            }
        },
        goToCommunitySelect(type) {
            uni.navigateTo({
                url: `/views/neighobr/address?type=${type}`
            });
        },
        handleClaimCoupon(coupon) {
             uni.showToast({
                 title: `已领取优惠券: ${coupon.type}`,
                 icon: 'none'
             });
             this.couponList = this.couponList.map(c => {
                 if (c.id === coupon.id) {
                    console.log(this.$refs.coupon)
                    return { ...c, status: 'usable' };
                 }
                 return c;
             });
         },
        handleUseCoupon(coupon) {
            // 如果已经有其他优惠券在使用中，先取消它们
            if (this.selectedCoupon && this.selectedCoupon.id !== coupon.id) {
                // 将之前使用的优惠券状态改回usable
                this.couponList = this.couponList.map(c => {
                    if (c.id === this.selectedCoupon.id) {
                        return { ...c, status: 'usable' };
                    }
                    return c;
                });
            }
            
            // 设置当前优惠券为使用中状态
            this.selectedCoupon = coupon;
            this.couponList = this.couponList.map(c => {
                if (c.id === coupon.id) {
                    return { ...c, status: 'canceluse' };
                }
                return c;
            });
            
            uni.showToast({
                title: `已使用优惠券: ${coupon.type}`,
                icon: 'success'
            });
            this.showCouponList = false
            
        },
        handleCancelUseCoupon(coupon) {
            // 取消使用优惠券
            this.selectedCoupon = null;
            this.couponList = this.couponList.map(c => {
                if (c.id === coupon.id) {
                    return { ...c, status: 'usable' };
                }
                return c;
            });
            
            uni.showToast({
                title: `已取消使用优惠券: ${coupon.type}`,
                icon: 'none'
            });
        },
        onVirtualAssetConfirm(selected, assets) {
            console.log('选择虚拟资产:', selected, assets);
            // 计算虚拟资产抵扣金额，最多-2元
            let amount = 0;
            if (selected === 'points' && assets.points > 0) {
                amount = Math.min(assets.points, 2); // 最多抵扣2元
            } else if (selected === 'warmCore' && assets.warm_core > 0) {
                amount = Math.min(assets.warm_core, 2); // 最多抵扣2元
            }
            
            this.selectedVirtualAsset = {
                type: selected,
                amount: amount
            };
            this.showVirtualAsset = false;
        },
        onTimeConfirm(e) {
            console.log('选择时间:', e);
            this.selectedTime = e.value;
            this.selectedTimeText = this.formatDateTime(e.value);
            this.showTimePicker = false;
        },
        formatDateTime(timestamp) {
            if (!timestamp) return '';
            const date = new Date(timestamp);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        },
        calculateSubtotal() {
            // 小计 = 赏金 - 虚拟资产 - 优惠券（先虚拟资产，再优惠券），显示不小于0
            const bounty = parseFloat(this.rewardAmount) || 0;
            const virtualAmount = this.selectedVirtualAsset ? (parseFloat(this.selectedVirtualAsset.amount) || 0) : 0;
            const afterVirtual = bounty - virtualAmount;
            const couponAmount = this.selectedCoupon ? (parseFloat(this.selectedCoupon.amount) || 0) : 0;
            const rawSubtotal = afterVirtual - couponAmount;
            return Math.max(rawSubtotal, 0).toFixed(2);
        },
        calculateTotal() {
            // 与小计一致
            return this.calculateSubtotal();
        },
        async submitOrder() {
            // 验证必填信息
            if (!this.validateForm()) {
                return;
            }
            
            // 先校验小计（不取0下限）
            const bounty = parseFloat(this.rewardAmount) || 0;
            const virtualAmount = this.selectedVirtualAsset ? (parseFloat(this.selectedVirtualAsset.amount) || 0) : 0;
            const afterVirtual = bounty - virtualAmount;
            const couponAmount = this.selectedCoupon ? (parseFloat(this.selectedCoupon.amount) || 0) : 0;
            const rawSubtotal = afterVirtual - couponAmount;
            if (rawSubtotal < 0) {
                uni.showToast({
                    title: '小计小于0，请重新调整赏金',
                    icon: 'none'
                });
                return;
            }
            uni.showLoading()
            const images = []
            try {
                for (const path of this.uploadedImages) {
                    const res = await postUploadNow(path)
                    const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
                    if (data && data.errno === 0 && data.url) {
                        images.push(data.url)
                    }
                }
            } catch (e) {
                uni.hideLoading()
                uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
                return
            }

            const orderData = {
                category_id: this.id,
                remark: this.demandDesc,
                images: images,
                quantity: this.quantity,
                weight: this.weight,
                order_amount: this.rewardAmount,
                coupon_id: this.selectedCoupon,
                warm_core_used: this.selectedVirtualAsset,
                delivery_time: this.selectedTimeText,
            };
            
            if (this.pageShow) {
                // 取外卖订单
                orderData.take_address = {
                    title: this.selectedPickupCommunity.title,
                    province: this.selectedPickupCommunity.province_name,
                    city: this.selectedPickupCommunity.city_name,
                    district:this.selectedPickupCommunity.district_name,
                    house_number:this.selectedPickupCommunity.house_number
                }
                orderData.recv_address = {
                    title: this.selectedDeliveryCommunity.title,
                    province: this.selectedDeliveryCommunity.province_name,
                    city: this.selectedDeliveryCommunity.city_name,
                    district:this.selectedDeliveryCommunity.district_name,
                    house_number:this.selectedDeliveryCommunity.house_number
                }
            } else {
                // 服务订单
                orderData.take_address = {
                    title: this.selectedDeliveryCommunity.title,
                    province: this.selectedDeliveryCommunity.province_name,
                    city: this.selectedDeliveryCommunity.city_name,
                    district:this.selectedDeliveryCommunity.district_name,
                    house_number:this.selectedDeliveryCommunity.house_number
                };
            }
            
           
            // 立即发布后清空小区相关的store数据
            if (this.pageShow) {
				console.log('代取代买提交订单:', orderData);
                postNeighborPublish(orderData).then(res => {
                    if (res.errno == 0) {
                        uni.showToast({ 
                            title: '发布成功',
                            icon: 'success',
                            success: ()=> {
                                this.clearCommunitySelection && this.clearCommunitySelection()
                                uni.navigateBack();
                            }
                        })
                    } else {
                        uni.showToast({title: res.msg || '发布失败'})
                    }
                }).finally(() => { uni.hideLoading() })
            } else {
				 console.log('代办提交订单:', orderData);
                postNeighborPublishAgency(orderData).then(res => {
                    if (res.errno == 0) {
                        uni.showToast({ 
                            title: '发布成功',
                            icon: 'success',
                            success: ()=> {
                                this.clearCommunitySelection && this.clearCommunitySelection()
                                uni.navigateBack();
                            }
                        })
                    } else {
						console.log(res)
                        uni.showToast({title: res.msg || '发布失败'})
                    }
                }).finally(() => { uni.hideLoading() })
            }
        },
        validateForm() {
            if (this.pageShow) {
                // 取外卖页面验证
                if (!this.selectedPickupCommunity) {
                    uni.showToast({
                        title: '请选择取货小区',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.pickupDetailAddress.trim()) {
                    uni.showToast({
                        title: '请填写取货详细地址',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.selectedDeliveryCommunity) {
                    uni.showToast({
                        title: '请选择送货小区',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.deliveryDetailAddress.trim()) {
                    uni.showToast({
                        title: '请填写送货详细地址',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.selectedTime) {
                    uni.showToast({
                        title: '请选择配送时间',
                        icon: 'none'
                    });
                    return false;
                }
            } else {
                // 服务页面验证
                if (!this.selectedDeliveryCommunity) {
                    uni.showToast({
                        title: '请选择服务小区',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.deliveryDetailAddress.trim()) {
                    uni.showToast({
                        title: '请填写服务详细地址',
                        icon: 'none'
                    });
                    return false;
                }
                if (!this.selectedTime) {
                    uni.showToast({
                        title: '请选择上门时间',
                        icon: 'none'
                    });
                    return false;
                }
            }
            
            if (!this.demandDesc.trim()) {
                uni.showToast({
                    title: '请填写需求描述',
                    icon: 'none'
                });
                return false;
            }
            
            return true;
        }
    }
}
</script>
<style lang="scss" scoped>
.publish-con {
    width: 100%;
    min-height: 100vh;
    background: #F6F6F6;
    padding-bottom: 120rpx;
}

.content {
    padding: 24rpx;
}

/* 地址卡片 */
.address-card {
    background: #FFFFFF;
    padding: 28rpx 28rpx 0;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
}


.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #E7F0FF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    padding: 20rpx 36rpx;
}

.section-title {
    position: relative;
    font-size: 28rpx;
    color: #333;

    &::after {
        position: absolute;
        content: "";
        width: 10rpx;
        height: 10rpx;
        border: 2rpx solid #0785CF;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        left: -20rpx;
    }
}

.complete-status {
    display: flex;
    align-items: center;
}

.status-text {
    font-size: 24rpx;
    color: #999999;
    margin-right: 8rpx;
}


.form-item {
    display: flex;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #F0F0F0;
    
    &:last-child {
        border-bottom: none;
    }
}

.label {
    font-size: 28rpx;
    color: #333333;
    width: 120rpx;
}

.input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
    margin: 0 16rpx;
    text-align: right;
}

.input-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 16rpx;
}

.value-text {
    font-size: 28rpx;
    color: #999;
    margin-right: 8rpx;


    &.fc {
        color: #333;
    }
}

/* 需求信息卡片 */
.demand-card {
    background: #FFFFFF;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
}

.header-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 16rpx;
}

.header-icon-img {
    width: 32rpx;
    height: 24rpx;
}

.card-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
}


.demand-textarea {
    width: 100%;
    height: 200rpx;
    font-size: 24rpx;
    color: #333333;
    border-radius: 8rpx;
    padding: 20rpx 0;
    box-sizing: border-box;
    margin-bottom: 24rpx;
}

.image-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.uploaded-images {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
}

.image-item {
    position: relative;
    width: 148rpx;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

.uploaded-img {
    width: 100%;
    height: 100%;
}

.delete-btn {
    position: absolute;
    top: 4rpx;
    right: 4rpx;
    width: 32rpx;
    height: 32rpx;
    background: rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
}

.upload-btn {
    width: 148rpx;
    height: 160rpx;
    background: #F8F8F8;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
}

.upload-text {
    font-size: 24rpx;
    margin-top: 8rpx;
}

/* 订单详情卡片 */
.order-card {
    background: #FFFFFF;
    padding: 0 32rpx 28rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx 0;
    border-bottom: 1rpx solid #F0F0F0;
    
    &:last-child {
        border-bottom: none;
    }
}

.order-label {
    font-size: 28rpx;
    color: #333333;
}

.quantity-control {
    display: flex;
    align-items: center;
}

.control-btn {
    font-size: 24rpx;
    color: #333333;
    width: 28rpx;
    height: 28rpx;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 1rpx solid #999999;
    text-align: center;
    line-height: 25rpx;
}

.quantity-value {
    font-size: 28rpx;
    color: #333333;
    margin: 0 24rpx;
    min-width: 20rpx;
    text-align: center;
}

.unit {
    font-size: 28rpx;
    color: #666666;
    margin-left: 16rpx;
}

.order-value {
    display: flex;
    align-items: center;
}

.coupon-amount {
    font-size: 28rpx;
    color: #FF4444;
    margin-right: 8rpx;
}

.virtual-amount {
    font-size: 28rpx;
    color: #FF4444;
    margin-right: 8rpx;
}

.placeholder {
    font-size: 28rpx;
    color: #999999;
    margin-right: 8rpx;
}

.time-text {
    font-size: 28rpx;
    color: #333333;
    margin-right: 8rpx;
}

.order-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 24rpx;
}

.summary-text {
    font-size: 28rpx;
    color: #666666;
    margin-right: 28rpx;
}

.subtotal {
    display: flex;
    align-items: center;
}

.subtotal-label {
    font-size: 28rpx;
    color: #666666;
}

.subtotal-amount {
    font-size: 32rpx;
    color: #FF4444;
    font-weight: 600;
}

/* 赏金卡片 */
.reward-card {
    background: #FFFFFF;
    padding: 32rpx;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.reward-label {
    font-size: 28rpx;
    color: #333333;
}

.reward-input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
    text-align: right;
    margin-left: 24rpx;
}

.submit-btn {
    width: 100%;
    height: 76rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    border-radius: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: 600;
}

/* 优惠券弹窗样式 */
.coupon-popup {
    padding: 100rpx 0 32rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28rpx;
}

.popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.popup-footer {
    display: flex;
    justify-content: center;
    padding-top: 28rpx;
}

.confirm-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0 4rpx 20rpx rgba(7, 133, 207, 0.1);
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
}
</style>